<template>
  <div class="trace-search">
    <div class="page-header">
      <h1>溯源查询</h1>
      <p>通过扫描二维码或输入溯源码快速查询商品信息</p>
    </div>

    <!-- 查询方式 -->
    <el-row :gutter="24">
      <el-col :span="12">
        <el-card class="search-card">
          <div class="card-header">
            <h3>扫码查询</h3>
          </div>
          <div class="scan-area">
            <div class="scan-icon">
              <el-icon><Camera /></el-icon>
            </div>
            <p>点击启动相机扫描二维码</p>
            <el-button type="primary" size="large" @click="startScan">
              启动扫描
            </el-button>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="search-card">
          <div class="card-header">
            <h3>手动输入</h3>
          </div>
          <div class="input-area">
            <el-input
              v-model="traceCode"
              placeholder="请输入溯源码"
              size="large"
              clearable
            >
              <template #append>
                <el-button type="primary" @click="handleSearch">查询</el-button>
              </template>
            </el-input>
            <p class="tip">溯源码格式：TR + 8位数字（如：TR12345678）</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 查询结果 -->
    <el-card v-if="searchResult" class="result-card">
      <div class="card-header">
        <h3>查询结果</h3>
        <el-tag :type="searchResult.status === 'normal' ? 'success' : 'danger'">
          {{ searchResult.status === 'normal' ? '正常' : '异常' }}
        </el-tag>
      </div>
      
      <div class="result-content">
        <!-- 商品基本信息 -->
        <div class="info-section">
          <h4>商品基本信息</h4>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="info-item">
                <label>商品名称：</label>
                <span>{{ searchResult.product.name }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <label>商品ID：</label>
                <span>{{ searchResult.product.id }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <label>生产批次：</label>
                <span>{{ searchResult.product.batch }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <label>生产日期：</label>
                <span>{{ searchResult.product.productionDate }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <label>保质期：</label>
                <span>{{ searchResult.product.expiryDate }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <label>供应商：</label>
                <span>{{ searchResult.product.supplier }}</span>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 溯源路径 -->
        <div class="trace-path">
          <h4>溯源路径</h4>
          <el-timeline>
            <el-timeline-item
              v-for="(step, index) in searchResult.tracePath"
              :key="index"
              :timestamp="step.time"
              :type="step.type"
            >
              <div class="step-content">
                <div class="step-title">{{ step.title }}</div>
                <div class="step-desc">{{ step.description }}</div>
                <div class="step-location">地点：{{ step.location }}</div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>

        <!-- 质检报告 -->
        <div class="quality-report">
          <h4>质检报告</h4>
          <el-table :data="searchResult.qualityReports" stripe>
            <el-table-column prop="item" label="检测项目" />
            <el-table-column prop="standard" label="标准值" />
            <el-table-column prop="actual" label="实际值" />
            <el-table-column prop="result" label="检测结果">
              <template #default="scope">
                <el-tag :type="scope.row.result === '合格' ? 'success' : 'danger'">
                  {{ scope.row.result }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="inspector" label="检测人员" />
            <el-table-column prop="date" label="检测时间" />
          </el-table>
        </div>
      </div>
    </el-card>

    <!-- 无查询结果 -->
    <el-card v-else-if="searched && !searchResult" class="no-result-card">
      <el-empty description="未找到相关溯源信息">
        <el-button type="primary" @click="searched = false">重新查询</el-button>
      </el-empty>
    </el-card>

    <!-- 最近查询历史 -->
    <el-card class="history-card">
      <div class="card-header">
        <h3>最近查询</h3>
        <el-button link @click="clearHistory">清空历史</el-button>
      </div>
      <div class="history-list">
        <div 
          v-for="item in searchHistory" 
          :key="item.id"
          class="history-item"
          @click="handleHistoryClick(item)"
        >
          <div class="history-info">
            <div class="history-code">{{ item.code }}</div>
            <div class="history-product">{{ item.productName }}</div>
            <div class="history-time">{{ item.time }}</div>
          </div>
          <el-icon class="history-arrow"><ArrowRight /></el-icon>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { defineComponent, ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Camera, ArrowRight } from '@element-plus/icons-vue'

export default defineComponent({
  name: 'TraceSearch',
  components: {
    Camera,
    ArrowRight
  },
  setup() {
    const traceCode = ref('')
    const searchResult = ref(null)
    const searched = ref(false)
    
    // 搜索历史
    const searchHistory = ref([
      {
        id: 1,
        code: 'TR12345678',
        productName: '有机苹果',
        time: '2024-01-15 10:30'
      },
      {
        id: 2,
        code: 'TR87654321',
        productName: '纯牛奶',
        time: '2024-01-14 15:20'
      },
      {
        id: 3,
        code: 'TR11223344',
        productName: '面包',
        time: '2024-01-13 09:15'
      }
    ])
    
    // 启动扫描
    const startScan = () => {
      ElMessage.info('相机扫描功能开发中...')
      // 模拟扫描结果
      setTimeout(() => {
        traceCode.value = 'TR12345678'
        handleSearch()
      }, 2000)
    }
    
    // 搜索处理
    const handleSearch = () => {
      if (!traceCode.value) {
        ElMessage.warning('请输入溯源码')
        return
      }
      
      searched.value = true
      
      // 模拟查询结果
      setTimeout(() => {
        if (traceCode.value === 'TR12345678') {
          searchResult.value = {
            status: 'normal',
            product: {
              id: 'P001',
              name: '有机苹果',
              batch: 'B2024011501',
              productionDate: '2024-01-15',
              expiryDate: '2024-01-30',
              supplier: '绿色农场'
            },
            tracePath: [
              {
                title: '商品入库',
                description: '商品完成入库，开始销售',
                location: '北京市朝阳区超市仓库',
                time: '2024-01-15 14:30',
                type: 'success'
              },
              {
                title: '运输配送',
                description: '商品从产地运输至销售点',
                location: '物流中心',
                time: '2024-01-15 10:00',
                type: 'primary'
              },
              {
                title: '质量检测',
                description: '商品通过质量检测，符合销售标准',
                location: '质检中心',
                time: '2024-01-15 08:00',
                type: 'success'
              },
              {
                title: '商品出厂',
                description: '商品完成包装，准备出厂',
                location: '绿色农场包装车间',
                time: '2024-01-15 06:00',
                type: 'info'
              },
              {
                title: '商品生产',
                description: '商品完成生产，进入包装环节',
                location: '绿色农场生产车间',
                time: '2024-01-15 00:00',
                type: 'warning'
              }
            ],
            qualityReports: [
              {
                item: '农药残留',
                standard: '≤0.01mg/kg',
                actual: '未检出',
                result: '合格',
                inspector: '张三',
                date: '2024-01-15 08:30'
              },
              {
                item: '重金属',
                standard: '≤0.1mg/kg',
                actual: '0.05mg/kg',
                result: '合格',
                inspector: '李四',
                date: '2024-01-15 08:45'
              },
              {
                item: '细菌总数',
                standard: '≤1000cfu/g',
                actual: '200cfu/g',
                result: '合格',
                inspector: '王五',
                date: '2024-01-15 09:00'
              }
            ]
          }
        } else {
          searchResult.value = null
        }
      }, 1000)
    }
    
    // 点击历史记录
    const handleHistoryClick = (item) => {
      traceCode.value = item.code
      handleSearch()
    }
    
    // 清空历史
    const clearHistory = () => {
      searchHistory.value = []
      ElMessage.success('历史记录已清空')
    }
    
    return {
      traceCode,
      searchResult,
      searched,
      searchHistory,
      startScan,
      handleSearch,
      handleHistoryClick,
      clearHistory
    }
  }
})
</script>

<style lang="scss" scoped>
.trace-search {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: 32px;
  
  h1 {
    font-size: 28px;
    color: var(--text-color-primary);
    margin-bottom: 8px;
  }
  
  p {
    font-size: 14px;
    color: var(--text-color-secondary);
    margin: 0;
  }
}

.search-card {
  margin-bottom: 20px;
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    h3 {
      margin: 0;
      font-size: 18px;
      color: var(--text-color-primary);
    }
  }
}

.scan-area {
  text-align: center;
  padding: 40px 20px;
  
  .scan-icon {
    font-size: 48px;
    color: var(--el-color-primary);
    margin-bottom: 16px;
  }
  
  p {
    margin-bottom: 20px;
    color: var(--text-color-secondary);
  }
}

.input-area {
  padding: 20px;
  
  .tip {
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-color-secondary);
  }
}

.result-card {
  margin-bottom: 20px;
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    
    h3 {
      margin: 0;
      font-size: 18px;
      color: var(--text-color-primary);
    }
  }
}

.info-section {
  margin-bottom: 32px;
  
  h4 {
    margin-bottom: 16px;
    color: var(--text-color-primary);
    border-bottom: 2px solid var(--el-color-primary);
    padding-bottom: 8px;
  }
  
  .info-item {
    margin-bottom: 12px;
    
    label {
      font-weight: 500;
      color: var(--text-color-secondary);
    }
    
    span {
      color: var(--text-color-primary);
    }
  }
}

.trace-path {
  margin-bottom: 32px;
  
  h4 {
    margin-bottom: 16px;
    color: var(--text-color-primary);
    border-bottom: 2px solid var(--el-color-primary);
    padding-bottom: 8px;
  }
  
  .step-content {
    .step-title {
      font-weight: 500;
      color: var(--text-color-primary);
      margin-bottom: 4px;
    }
    
    .step-desc {
      color: var(--text-color-secondary);
      margin-bottom: 4px;
    }
    
    .step-location {
      font-size: 12px;
      color: var(--text-color-placeholder);
    }
  }
}

.quality-report {
  h4 {
    margin-bottom: 16px;
    color: var(--text-color-primary);
    border-bottom: 2px solid var(--el-color-primary);
    padding-bottom: 8px;
  }
}

.no-result-card {
  margin-bottom: 20px;
  text-align: center;
  padding: 40px;
}

.history-card {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    
    h3 {
      margin: 0;
      font-size: 18px;
      color: var(--text-color-primary);
    }
  }
  
  .history-list {
    .history-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 16px;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color 0.2s;
      
      &:hover {
        background-color: var(--el-fill-color-lighter);
      }
      
      .history-info {
        .history-code {
          font-weight: 500;
          color: var(--text-color-primary);
        }
        
        .history-product {
          font-size: 14px;
          color: var(--text-color-secondary);
          margin: 4px 0;
        }
        
        .history-time {
          font-size: 12px;
          color: var(--text-color-placeholder);
        }
      }
      
      .history-arrow {
        color: var(--text-color-placeholder);
      }
    }
  }
}

@media (max-width: 768px) {
  .trace-search {
    padding: 16px;
  }
  
  .scan-area {
    padding: 30px 16px;
  }
  
  .info-section {
    .el-col {
      margin-bottom: 12px;
    }
  }
}
</style> 